<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>searchbox</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>SearchBox</h3>
<p>Override defaults with $.fn.searchbox.defaults.</p>
<img src="images/searchbox.png">

<h4>Dependencies</h4>
<ul>
	<li>menubutton</li>
</ul>

<h4>Usage Example</h4>
<h5>Create SearchBox</h5>
<p>1. Create from markup. Add 'easyui-searchbox' class to &lt;input/&gt; markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/javascript"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;qq(value,name){&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(value+":"+name)&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"ss"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-searchbox"</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">searcher</span><span>=</span><span class="attribute-value">"qq"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">prompt</span><span>=</span><span class="attribute-value">"Please&nbsp;Input&nbsp;Value"</span><span>&nbsp;</span><span class="attribute">menu</span><span>=</span><span class="attribute-value">"#mm"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:300px"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">input</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"mm"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:120px"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"all"</span><span>&nbsp;</span><span class="attribute">iconCls</span><span>=</span><span class="attribute-value">"icon-ok"</span><span class="tag">&gt;</span><span>All&nbsp;News</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"sports"</span><span class="tag">&gt;</span><span>Sports&nbsp;News</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-searchbox" style="display: none;">	&lt;script type="text/javascript"&gt;
		function qq(value,name){
			alert(value+":"+name)
		}
	&lt;/script&gt;
	&lt;input id="ss" class="easyui-searchbox"
			searcher="qq"
			prompt="Please Input Value" menu="#mm" style="width:300px"&gt;&lt;/input&gt;
			
	&lt;div id="mm" style="width:120px"&gt;
		&lt;div name="all" iconCls="icon-ok"&gt;All News&lt;/div&gt;
		&lt;div name="sports"&gt;Sports News&lt;/div&gt;
	&lt;/div&gt;
</textarea>
<p>2. Create programatically.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>&lt;input&nbsp;id=</span><span class="string">"ss"</span><span>&gt;&lt;/input&gt;&nbsp;&nbsp;</span></span></li><li class=""><span>&lt;div&nbsp;id=<span class="string">"mm"</span><span>&nbsp;style=</span><span class="string">"width:120px"</span><span>&gt;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;name=<span class="string">"all"</span><span>&nbsp;iconCls=</span><span class="string">"icon-ok"</span><span>&gt;All&nbsp;News&lt;/div&gt;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;name=<span class="string">"sports"</span><span>&gt;Sports&nbsp;News&lt;/div&gt;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&lt;/div&gt;&nbsp;&nbsp;</span></li><li class=""><span>$(<span class="string">'#ss'</span><span>).searchbox({&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;width:200,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;searcher:<span class="keyword">function</span><span>(value,name){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(value&nbsp;+&nbsp;<span class="string">","</span><span>&nbsp;+&nbsp;name)&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;menu:<span class="string">'#mm'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;prompt:<span class="string">'Please&nbsp;Input&nbsp;Value'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-searchbox" style="display: none;">	&lt;input id="ss"&gt;&lt;/input&gt;
	&lt;div id="mm" style="width:120px"&gt;
		&lt;div name="all" iconCls="icon-ok"&gt;All News&lt;/div&gt;
		&lt;div name="sports"&gt;Sports News&lt;/div&gt;
	&lt;/div&gt;
	$('#ss').searchbox({
		width:200,
		searcher:function(value,name){
			alert(value + "," + name)
		},
		menu:'#mm',
		prompt:'Please Input Value'
	});
</textarea>

<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>Set the component width.</td>
<td>auto</td>
</tr>
<tr>
<td>prompt</td>
<td>string</td>
<td>The prompt message to be displayed in input box.</td>
<td>''</td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The inputed value.</td>
<td>''</td>
</tr>
<tr>
<td>menu</td>
<td>selector</td>
<td>
The search type menu. Each menu item can has below attribute:<br>
name: the search type name.<br>
selected: current selected search type name.
</td>
<td>null</td>
</tr>
<tr>
<td>searcher</td>
<td>function(value,name)</td>
<td>The searcher function that will be called when user presses the searching button or press ENTER key.</td>
<td>null</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>
<tr>
<td>menu</td>
<td>none</td>
<td>Return the search type menu object.</td>
</tr>
<tr>
<td>textbox</td>
<td>none</td>
<td>Return the text box object.</td>
</tr>
<tr>
<td>getValue</td>
<td>none</td>
<td>Return the current searching value.</td>
</tr>
<tr>
<td>setValue</td>
<td>value</td>
<td>Set a new searching value.</td>
</tr>
<tr>
<td>getName</td>
<td>none</td>
<td>Return the current searching type name.</td>
</tr>
<tr>
<td>selectName</td>
<td>name</td>
<td>Select the current searching type name.</td>
</tr>
<tr>
<td>destroy</td>
<td>none</td>
<td>Destroy this component.</td>
</tr>
<tr>
<td>resize</td>
<td>width</td>
<td>Reset the component width.</td>
</tr>
</tbody></table>

</div>	
</body>
</html>